<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>createPattern画布</title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid #aaa; display: block;margin: 50px auto;">
			
			
		</canvas>
	</body>
	<!--
    	作者：zyl
    	时间：2017-05-23
    	描述：
    	createPattern
    	定义和用法
			createPattern() 方法在指定的方向内重复指定的元素。
			元素可以是图片、视频，或者其他 <canvas> 元素。
			被重复的元素可用于绘制/填充矩形、圆形或线条等等。
			JavaScript 语法：
			context.createPattern(canvas,"repeat|repeat-x|repeat-y|no-repeat");
			参数	描述
				image	规定要使用的图片、画布或视频元素。
				repeat	默认。该模式在水平和垂直方向重复。
				repeat-x	该模式只在水平方向重复。
				repeat-y	该模式只在垂直方向重复。
				no-repeat	该模式只显示一次（不重复）。
    -->
	<script>
				var canvas = document.getElementById("canvas");
				 canvas.width =800;
	            canvas.height =800;	 
	        var context = canvas.getContext("2d");//2d环境
	        //
	        var backCanvas = creatBackgroundCavas();
	        var pattern = context.createPattern(backCanvas,"repeat")
	        context.fillStyle=pattern;
	        	context.fillRect(0,0,800,800);
	        	
	       function creatBackgroundCavas(){
	       	var backCanvas =document.createElement("canvas");//创建画布
	       	backCanvas.width=100;
	       	backCanvas.height=100;
	       	var backCanvasContext= backCanvas.getContext("2d");
	       	drawStar(backCanvasContext,50,50,50,0);
	       	return backCanvas;
	       }
	       
	       function drawStar(cxt,x,y,r,rot){
	       	cxt.save();
	       	cxt.translate(x,y);
	       	cxt.rotate(rot/180*Math.PI);
	       	cxt.scale(r,r);
	       	
	       starPath(cxt);
	       	cxt.fillStyle="#f63";
	       	cxt.fill();
	       	cxt.restore();
	       	
	       }
	      function starPath(cxt){   //在 0 0 位置会出一个没有偏移没有旋转角的标准五角星
		cxt.beginPath();
		for(var i=0; i<5; i++){
			cxt.lineTo(Math.cos((18+i*72)/180*Math.PI),
										 -Math.sin((18+i*72)/180*Math.PI));
		 	cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,
										 -Math.sin((54+i*72)/180*Math.PI)*0.5);
		}
		}
	</script>
</html>
